import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  TouchableHighlight,
} from 'react-native'


export default class ViewUtils {
  /**
   * 返回按钮
   * @param {*} callBack 
   */
  static getLeftButton(callBack) {
    return <TouchableOpacity
      style={{ padding: 8 }}
      onPress={callBack} >
      <Image style={{ width: 26, height: 26, tintColor: 'white' }}
        source={require('../../res/images/ic_arrow_back_white_36pt.png')} />
    </ TouchableOpacity>
  }

  static getRightButton(callBack) {
    return <TouchableOpacity
      style={{ padding: 8 }}
      onPress={callBack} >
      <Image style={{ width: 26, height: 26, tintColor: 'white' }}
        source={require('../../res/images/ic_sort.png')} />
    </ TouchableOpacity>
  }

  /**
   * 右边喜欢按钮
   * @param {*} callBack 
   */
  static rightFavoriteButton(callBack) {
    return <TouchableOpacity
      style={{ padding: 8 }}
      onPress={callBack} >
      <Image style={{ width: 26, height: 26, tintColor: 'white' }}
        source={require('../../res/images/ic_star.png')} />
    </ TouchableOpacity>
  }

  static getSettingItem(callBack, icon, text, tintStyle, expandableIco) {
    return (
      <TouchableHighlight
        onPress={callBack}>
        <View style={[styles.setting_item_container]}>
          <View style={{ alignItems: 'center', flexDirection: "row" }}>
            {icon ?
              <Image source={icon} resizeMode="stretch"
                style={[{ opacity: 1, width: 16, height: 16, marginRight: 10 }, tintStyle]} />
              : <View style={{ opacity: 1, width: 16, height: 16, marginRight: 10 }}></View>
            }
            <Text>{text}</Text>
          </View>
          <Image source={expandableIco ? expandableIco : require('../../res/images/ic_tiaozhuan.png')}
            style={[{
              marginRight: 10,
              height: 22,
              width: 22,
              alignSelf: 'center',
              opacity: 1
            }, tintStyle]} />
        </View>
      </TouchableHighlight>
    )
  }
}

const styles = StyleSheet.create({
  setting_item_container: {
    backgroundColor: 'white',
    padding: 10, height: 60,
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row'
  },
})